<template>
  <div>
    <template v-if="item.child && item.child.length">
      <el-submenu
        ref="subMenu"
        :index="item.organizationNo + ''"
        popper-append-to-body
      >
        <template slot="title">
          <div v-if="item.organizationNo" @click="chooseCompany(item)" v-html="item.organizationName"></div>
          <!-- <Item v-if="item.organizationNo" :title="item.organizationName" @click="chooseCompany(item)"/> -->
        </template>
        <sidebar-item
          v-for="child in item.child"
          :key="child.organizationNo"
          :is-nest="true"
          :item="child"
          class="nest-menu"
          @chooseCompany="chooseCompany"
        />
      </el-submenu>
    </template>

    <el-menu-item
      v-else
      :index="item.organizationNo + ''"
      :class="{ 'submenu-title-noDropdown': !isNest }"
    >
      <div @click="chooseCompany(item)" v-html="item.organizationName"></div>
      <!-- <Item :title="item.organizationName" @click="chooseCompany(item)"/> -->
    </el-menu-item>
  </div>
</template>

<script>
// import { isExternal } from "@/utils/validate";
// import Item from "./Item";

export default {
  name: "SidebarItem",
  components: {
    // Item
  },
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ""
    }
  },
  data() {
    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
    // TODO: refactor with render function
    this.onlyOneChild = null;
    return {};
  },
  mounted() {
  },
  methods: {
    chooseCompany(company) {
      this.$emit('chooseCompany', company);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
// 菜单栏选中样式修改
// .submenu-title-noDropdown,
// .el-submenu__title {
//   height: 50px !important;
//   line-height: 50px !important;
//   i {
//     color: #fff !important;
//   }
//   // svg { fill: rgb(124, 151, 124) !important; }
//   &:hover,
//   &.is-active {
//     background-color: #ffffff !important;
//     color: #0480fb !important;
//     i {
//       // color: aqua !important;
//       color: #0480fb !important;
//     }
//     // svg { fill: rgb(17, 218, 17) !important; }
//   }
// }
</style>
